<!--
 * @Description: 成交分析
 * @Author: py
 * @Date: 2024-11-04
-->
<script setup lang='ts'>
import type { EChartsOption } from 'echarts'

import { useDealAnalysis } from '@fl/api/data-analysis'
import { Echart } from '@fl/origin-components/Echart'
import { set } from 'lodash-es'

import type { DateRange } from '../types'

const oDateRange = inject<Ref<DateRange>>('dateRange')
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const oAreaParams = computed(() => {
    return {
        endTime: oDateRange.value.endTime,
        startTime: oDateRange.value.startTime,
        type: 7, // 6: 网签; 7: 面积; 8: 户型;
    }
})
const oHouseTypeParams = computed(() => {
    return {
        endTime: oDateRange.value.endTime,
        startTime: oDateRange.value.startTime,
        type: 8,
    }
})
const { data: leftChartsData, isLoading: leftChartsLoading } = useDealAnalysis(oAreaParams)
const { data: rightChartsData, isLoading: rightChartsLoading } = useDealAnalysis(oHouseTypeParams)

const leftChartOptions = reactive({
    series: [
        {
            data: [],
            label: {
                // 标签对齐方式-文字
                alignTo: 'edge',
                // 文字边距，仅当 label.position 为 'outer' 并且 label.alignTo 为 'edge' 时有效
                edgeDistance: 75,
                formatter: '{nameStyle|{b}}\n{valueStyle|{c}人}',
                // 让label位于labelLine之上
                padding: [0, -75],
                rich: {
                    nameStyle: {
                        color: '#000000a5',
                        lineHeight: 16,
                        padding: [15, 0, 8, 0],
                    },
                    valueStyle: {
                        color: '#00000072',
                        padding: [5, 0, 5, 0],
                    },
                },
                show: true,
            },
            labelLayout() {
                // console.log(params)
                return {
                    // align: 'right',
                    // dx: params.labelRect.width,
                    // dy: params.rect.height,
                    dy: -2,
                    verticalAlign: 'bottom',
                }
            },
            // labelLine: {
            //     length: 10,
            //     length2: 70,
            //     lineStyle: {
            //         color: '#0000003f',
            //     },
            //     showAbove: true, // 不生效
            // },
            radius: ['33%', '60%'],
            type: 'pie',
        },
    ],
    // tooltip: {
    //     trigger: 'item'
    // },
}) as EChartsOption

const rightChartOptions = reactive({
    series: [
        {
            data: [],
            label: {
                // 标签对齐方式-文字
                alignTo: 'edge',
                // 文字边距，仅当 label.position 为 'outer' 并且 label.alignTo 为 'edge' 时有效
                edgeDistance: 75,
                formatter: '{nameStyle|{b}}\n{valueStyle|{c}人}',
                // 让label位于labelLine之上
                padding: [0, -75],
                rich: {
                    nameStyle: {
                        color: '#000000a5',
                        lineHeight: 16,
                        padding: [15, 0, 8, 0],
                    },
                    valueStyle: {
                        color: '#00000072',
                        padding: [5, 0, 5, 0],
                    },
                },
                show: true,
            },
            labelLayout() {
                return {
                    dy: -2,
                    verticalAlign: 'bottom',
                }
            },
            radius: ['33%', '60%'],
            type: 'pie',
        },
    ],
}) as EChartsOption

watch(leftChartsData, (oNewData) => {
    if (oNewData) {
        set(
            leftChartOptions,
            'series[0].data',
            oNewData.seriesData,
        )
    }
}, { deep: true, immediate: true })

watch(rightChartsData, (oNewData) => {
    if (oNewData) {
        set(
            rightChartOptions,
            'series[0].data',
            oNewData.seriesData,
        )
    }
}, { deep: true, immediate: true })
</script>

<template>
    <div class="pr-20">
        <h5 class="module-title">
            成交分析
        </h5>

        <el-row>
            <el-col :span="12"
                    class="pr-10"
            >
                <p class="chart-title">
                    网签面积分布（m²）
                </p>

                <div class="chart-container">
                    <ElSkeleton :loading="leftChartsLoading"
                                animated
                    >
                        <Echart :options="leftChartOptions"
                                :height="350"
                        />
                    </ElSkeleton>
                </div>
            </el-col>

            <el-col :span="12"
                    class="pl-10"
            >
                <p class="chart-title">
                    网签户型分布
                </p>

                <div class="chart-container">
                    <ElSkeleton :loading="rightChartsLoading"
                                animated
                    >
                        <Echart :options="rightChartOptions"
                                :height="350"
                        />
                    </ElSkeleton>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.chart-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #4e5969;
    margin-bottom: 10px;
}

.chart-container {
    width: 85%;
    margin: 60px auto 0;
}
</style>
